<template>
<div>
  <div :style="{height:height+'px',width:width+'px'}">
    <div class="card-panel" :style="{background:backColor}">
      <div class="card-panel-icon-wrapper" :style="{background:iconBackColor}">
        <svg-icon :icon-class="icon" class-name="card-panel-icon" :style="{color:iconColor}" />
      </div>
      <div class="card-panel-description" >
        <div class="card-panel-all">
          <div class="card-panel-num" :title="panelValues+unit" @click="jumpToPage">{{panelValues}}</div>
          <span style="display:flex;align-items:end;padding-bottom:3px">{{unit}}</span>   
        </div>
        <div :title="title" :style="{'font-size': $attrs.fontSize,'font-weight' : $attrs.bold ? 'bold' : 'normal','font-style': $attrs.italic ? 'italic' : 'normal','text-decoration': $attrs.underline ? 'underline' : 'none','text-align': `${$attrs.textAlign}`,'color': `${$attrs.fontColor}`,'line-height': `${$attrs.lineHeight}`}"   class="card-panel-text" @click="jumpToPage">
          {{title}}
        </div>
      </div>
    </div>
  </div>
  <div style="width:100%;height:20px;"></div>
</div>
</template>

<script>
  import CountTo from 'vue-count-to';
  import {getMenu} from '@/api/system/menu';
  import {getComputeField} from '@/api/custom/portalDesigner';
  import {getColumnFormula} from '@/api/custom/portalDesigner';
  import {getHomePage} from '@/api/login'
  export default {
    components: {
      CountTo
    },
    props: {
      width: { //宽度
        type: Number,
        default: '300'
      },
      height: { //高度
        type: Number,
        default: '100'
      },
      title: { //标题
        type: String,
        default: '数据面板'
      },
      icon: { //图标
        type: String,
        default: 'cascader'
      },
      iconColor: { //图标颜色
        type: String,
        default: '#409eff'
      },
      iconBackColor: { //图标背景色
        type: String,
        default: '#fff'
      },
      backColor: { //背景色
        type: String,
        default: '#fff'
      },
      jumpTo: { //跳转功能
        type: Number,
        default: 0
      },
      tableName: { //表名
        type: String,
        default: ''
      },
      field: { //字段
        type: String,
        default: ''
      },
      method: { //计算方法
        type: String,
        default: ''
      },
      unit: { //单位
        type: String,
        default: ''
      },
      columnType: { // 计算的字段类型
        type: String,
        default: ''
      }
    },
    data() {
      return {
        panelValues: '',
        url: ''
      }
    },
    mounted() {
      if (this.tableName && this.field && this.method) {
        this.refreshPanelValue()
      }
      this.getJumpUrl()
    },
    watch: {
      field(val) {
        this.refreshPanelValue()
      },
      method(val) {
        this.refreshPanelValue()
      },
      jumpTo() {
        this.getJumpUrl()
      }
    },
    methods: {
      //获取面板计算值
      refreshPanelValue() {
        if (this.field && this.method) {
         
          if(this.columnType.includes('int')){
            let params = {
              fieldName: this.field,
              fun: this.method,
              tableName: this.tableName
            }
            getComputeField(params).then((res) => {
            if (res.code === 0) {
              this.panelValues = res.data
            }
          }).catch(e => console.log(e))
          }else{
            const data = {
              columnName: this.field,
              formula: this.method,
              tableName: this.tableName
            }
            getColumnFormula(data).then((res) => {
            if (res.code === 0) {
              this.panelValues = res.data.data
            }
          }).catch(e => console.log(e))
          }
        } else {
          this.panelValues = ''
        }
      },
      //获取跳转url
      async getJumpUrl() {
        const flag = this.$store.state.currentStep.clickFlag
        if(flag){
          let toUrl = ''
          await getHomePage().then(res => {
            toUrl= res.data.path
          }).catch(error => {
            console.log(error)
          })
          let urls = []
          let res = null
          //根据菜单id获取完整path
          while(true){
            res = await getMenu(res?res.data.parentId:this.jumpTo)
            if (res.code === 0) {
              if (res.data) {
                urls.push(res.data.path)
                if (res.data.parentId === 0) {
                  break
                }
              } else {
                break
              }
            }
          }
          if(urls.length > 0) {
            toUrl = urls.reverse().join('/')
          }
          this.url = toUrl
        }
      },
      //跳转
      jumpToPage() {
        this.$router.push(this.url)
      }
    }
  }

</script>

<style lang="scss" scoped>
  .card-panel {
    width:100%;
    // height: 108px;
    height: 100%;
    cursor: pointer;
    font-size: 12px;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content:space-between;
    .card-panel-icon-wrapper {
      text-align: center;
      margin-left: 8px;       
      transition: all 0.38s ease-out;
      border-radius: 50%;
      .card-panel-icon {
        font-size: 60px;
        padding: 10px;
      }
    }

    .card-panel-description {
      width: 75%;
      float: right;
      font-weight: bold;

      .card-panel-all {
        width: 100%;
        height: 100%;
        display: flex;
      }
      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        width: 100%;
        overflow:hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .card-panel-num {
        font-size: 20px;
        margin-right: 5px;
        color: rgba(0, 0, 0, 0.8);
        // width: 80%;
        overflow:hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
  }

  @media (max-width:550px) {
    .card-panel-description {
      display: none;
    }

    .card-panel-icon-wrapper {
      float: none !important;
      width: 100%;
      height: 100%;
      margin: 0 !important;

      .svg-icon {
        display: block;
        margin: 14px auto !important;
        float: none !important;
      }
    }
  }

</style>
